<template>
     <view class="Index">
         <view class="pubuBox">
             <view class="pubuItem">
                 <view class="item-masonry" v-for="(item, index) in shopList" :key="index" @click="shopClick(item)">
                     <image :src="item.image" mode="widthFix"></image>
                     <view class="listtitle"> 
                         <view class="listtitle1">{{item.title}}</view>
                         <view class="listtitle2">
                             <text class="listtitle2son">￥</text>
                             {{ item.price}}
                         </view>
                         <view class="listtitle3" v-if="item.store!=null">
                             店铺：{{item.store}}
                         </view>
						 <view class="listtitle3" v-if="item.store==null">
						     店铺：商城直营店
						 </view>
                     </view>
                 </view>
             </view>
         </view>
     </view>
 </template>
 
 <script>
     export default {
		 props:{
			 shopList:[]
		 },
         data() {
             return {

             };
         },
         onShow() {},
         onLoad() {
		 },
         methods: {
			 shopClick(item){
				 this.$emit("shopClick",item)
			 }
		 },
 
     };
 </script>
 
 <style scoped="scoped" lang="scss">
     //瀑布流
     page {
         background-color: #eee;
         height: 100%;
     }
 
     .pubuBox {
         padding: 22rpx;
     }
 
     .pubuItem {
         column-count: 2;
         column-gap: 20rpx;
     }
 
     .item-masonry {
         box-sizing: border-box;
         border-radius: 15rpx;
         overflow: hidden;
         background-color: #fff;
         break-inside: avoid;
         box-sizing: border-box;
         margin-bottom: 20rpx;
         box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
     }
 
     .item-masonry image {
         width: 100%;
     }
 
     .listtitle {
         padding-left: 22rpx;
         font-size: 24rpx;
         padding-bottom: 22rpx;
 
         .listtitle1 {
             line-height: 39rpx;
             text-overflow: -o-ellipsis-lastline;
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             line-clamp: 2;
             -webkit-box-orient: vertical;
             min-height: 39rpx;
             max-height: 78rpx;
         }
 
         .listtitle2 {
             color: #ff0000;
             font-size: 32rpx;
             line-height: 32rpx;
             font-weight: bold;
             padding-top: 22rpx;
 
             .listtitle2son {
                 font-size: 32rpx;
             }
         }
 
         .listtitle3 {
             font-size: 28rpx;
             color: #909399;
             line-height: 32rpx;
             padding-top: 22rpx;
         }
     }
 
     .Index {
         width: 100%;
         height: 100%;
     }
 </style>